<template>
  <el-dialog :title="type === 'move' ? '选择资源移动后保存路径' : '选择资源复制后保存路径'"
    :visible="dialogVisible"
    width="650px"
    @close="close"
    :destroy-on-close="true">
    <!-- destroy-on-close：关闭时销毁 Dialog 中的元素，这样能刷新 tree 控件懒加载 -->
    <div class="tree-contain">
      <el-tree
        node-key="id"
        lazy
        :load="loadNode"
        :props="defaultProps"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        v-loading="list.loading"
        @node-click="nodeClick"
        ref="tree">
        <div class="custom-tree-icon" slot-scope="{ node, data }">
          <i :class="['icon-color icon iconfont', (node.expanded && node.isLeaf) ? 'icon-folder' : 'icon-folder-open']"></i> 
          {{ data.name }}
        </div>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-perms="'info:resource:add'" @click="$refs.addDialog.open()">新建文件夹</el-button>
      <div>
        <el-button type="primary" v-if="type === 'move'" @click="move()" :loading="loading">确 定</el-button>
        <el-button type="primary" v-if="type === 'copy'" @click="copy()" :loading="loading">确 定</el-button>
        <el-button @click="reset()">关 闭</el-button>
      </div>
    </div>
    <add ref="addDialog" :dialogVisible.sync="addDialogVisible" @getAll="getList" :appendToBody="true" :path="curPath" @refresh="partialRefreshpartialRefresh" :node="curNode" />
  </el-dialog>
</template>

<script>
import add from './Add'
export default {
  components: {
    add
  },
  data () {
    return {
      type: '',
      addDialogVisible: false,
      loading: false,
      list: {
        loading: false
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      curPath: '', // 当前路径
      curNode: null, // 当前节点
      filePath: null // 传递过来的文件路径
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  methods: {
    close () {
      this.$emit('getAll')
      this.$emit('update:dialogVisible', false)
      this.$emit('update:curIndex', null)
    },
    open (path, type) {
      this.type = type
      this.filePath = path
      this.$emit('update:dialogVisible', true)
    },
    move () { // 移动
      this.loading = true
      this.$API({
        name: 'MoveResource',
        params: {
          path: this.curPath,
        },
        data: this.filePath,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.close()
          this.$emit('getAll')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    copy () { // 复制
      this.loading = true
      this.$API({
        name: 'CopyResource',
        params: {
          path: this.curPath,
        },
        data: this.filePath,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.close()
          this.$emit('getAll')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    reset() {
      this.$emit('update:dialogVisible', false)
    },
    nodeClick (data, node) {
      this.curPath = data.path
      this.curNode = node
    },
    async loadNode (node, resolve) { // 懒加载
      if (node.level === 0) {
        return resolve(await this.getList())
      } else if (node.level >= 1) {
        return resolve(await this.getList(node.data.path))
      } else {
        return resolve([]) // 防止该节点没有子节点时一直转圈的问题出现
      }
    },
    async getList (path = '/') { // 获取列表
      const res = await this.$API({
        name: 'GetResourceList',
        params: {
          path: path,
          search: ''
        },
        requireAuth: true
      })
      const list = []
      // 移动到的 tree 控件只能展示文件夹，不能展示文件
      res.data.data.forEach((item, index) => {
        if (item.type === 'folder') {
          list.push({
            id: index,
            leaf: false,
            name: item.name,
            type: item.type,
            path: item.path
          })
        }
      })
      return list
    },
    // 实现局部刷新，在点击弹窗处调用的
    partialRefreshpartialRefresh (node) {
      node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
      node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tree-contain {
  height: 240px;
  overflow: auto;
  .custom-tree-icon {
    .icon-color {
      color: rgb(255, 208, 0);
    }
  }
}
</style>